<template>
	<view>
		<view class="p-3 flex align-center">
			<img
				class="rounded-circle flex-shrin mr-3"
				src="/static/tabbar/index-selected.png"
				alt="头像"
				style="width: 120rpx;height: 120rpx;"
			/>
			<view class="flex-1 flex flex-column text-muted font">
				<view class="flex align-end">
					<text class="font-lg text-dark mr-2">{{ user.nickname || user.username }}</text>
					{{ user.sex }}
				</view>
				<text class="text-ellipsis">{{ user.desc || '无描述...' }}</text>
			</view>
		</view>
		<div class="bg-light" style="height: 20rpx;"></div>
		<view class="p-3">
			<progress :percent="progress" active stroke-width="3" />
			<view class="flex align-center justify-between font">
				<text class="text-muted">总:{{ user.total_size | bytesTosize }}</text>
				<text class="text-warning">已用:{{ user.used_size | bytesTosize }}</text>
			</view>
		</view>
		<div class="bg-light" style="height: 20rpx;"></div>
		<uni-list-item title="其他设置" link="navigateTo"></uni-list-item>
		<uni-list-item title="退出登录" link="navigateTo" @click="logoutClick"></uni-list-item>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	data() {
		return {}
	},
	computed: {
		...mapState({
			user: state => {
				return state.user || {}
			}
		}),
		progress() {
			if (this.user.total_size === 0) {
				return 0
			}
			return (this.user.used_size / this.user.total_size) * 100
		}
	},
	onShow() {
		this.getSize()
	},
	methods: {
		getSize() {
			this.$H.get('/getSize', { token: true }).then(res => {
				this.$store.dispatch('updateSize', res)
			})
		},
		logoutClick() {
			this.$store.dispatch('logout')
		}
	},
	filters: {
		bytesTosize(bytes) {
			// kb转GB
			if (bytes === 0) return '0KB'
			var k = 1024,
				sizes = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
				i = Math.floor(Math.log(bytes) / Math.log(k))
			return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
		}
	}
}
</script>

<style></style>
